<template>
  <div class="link-details" v-if="!getIsPhone" v-show="showLinkDetails">
    <div class="link-content box-shadow">
      <pop-up @click="hidePopup">
        <div class="left-part">
          <div class="list box-shadow">
            <pop-up-list-item 
              :content="linkDetails.accountType" 
              label="账号类型">
            </pop-up-list-item>
            <pop-up-list-item 
              :content="linkDetails.visited" 
              label="访问量">
              <template v-slot:default="scope">
                <div style="color: #e02828">
                  <span>{{linkDetails.visited}}</span><span>次</span>
                </div>
              </template>
            </pop-up-list-item>
            <pop-up-list-item 
              label="注册人数">
              <template v-slot:default="scope">
                <div style="color: #e02828">
                  <span>{{linkDetails.registed}}</span><span>人</span>
                </div>
              </template>
            </pop-up-list-item>
          </div>
          <div class="list box-shadow">
            <pop-up-list-item 
              label="彩票返点">
              <template>
                <div>
                  <span>{{linkDetails.lotteryRefundRate | formatPercent}}</span>
                  <span class="refund-amount" style="color: #e02828">({{linkDetails.lotteryRefund}})</span>
                </div>
              </template>
            </pop-up-list-item>
            <pop-up-list-item 
              label="AG返点">
              <template>
                <div>
                  <span>{{linkDetails.agRefundRate | formatPercent}}</span>
                  <span class="refund-amount" style="color: #e02828">({{linkDetails.agRefund}})</span>
                </div>
              </template>
            </pop-up-list-item>
            <pop-up-list-item 
              label="皇冠返点">
              <template>
                <div>
                  <span>{{linkDetails.chrownRefundRate | formatPercent}}</span>
                  <span class="refund-amount" style="color: #e02828">({{linkDetails.chrownRefund}})</span>
                </div>
              </template>
            </pop-up-list-item>
            <pop-up-list-item 
              label="分红">
              <template>
                <div>
                  <span>{{linkDetails.bonusRefundRate | formatPercent}}</span>
                  <span class="refund-amount" style="color: #e02828">({{linkDetails.bonus}})</span>
                </div>
              </template>
            </pop-up-list-item>
            <pop-up-list-item 
              :content="'26'" 
              label="日工资">
              <template>
                <div>
                  <span>{{linkDetails.salaryRefundRate | formatPercent}}</span>
                  <span class="refund-amount" style="color: #e02828">({{linkDetails.salary}})</span>
                </div>
              </template>
            </pop-up-list-item>
          </div>
        </div>
        <div class="right-part">
          <title-editor 
            @click="deleteLinkCard"
            @update="editedLinkData"
            :value="linkDetails.linkTitle"
            :linkData="linkDetails"
            >
          </title-editor>
          <div class="links">
            <div 
              class="links-icode link border-bottom hover-style" 
              @click="copyCode"
              ref="code"
              :data-clipboard-text="linkDetails.invitingCode"
              >
              <p><span class="bold">邀请码：</span><span class="red">({{copiedCode}})</span></p>
              <p class="content" >{{linkDetails.invitingCode}}</p>
            </div>
            <div 
              class="links-link link border-bottom hover-style" 
              @click="copyLink"
              ref="link" 
              :data-clipboard-text="linkDetails.link"
              >
              <p><span class="bold">推广链接：</span><span class="red">({{copiedLink}})</span></p>
              <p class="content" >{{linkDetails.link}}</p>
            </div>
            <div class="qrcode-wrapper">
              <img src="../../../assets/imgs/qrcode.png" alt="">
            </div>
          </div>
        </div>
      </pop-up>
    </div>
    <info-tip :showInfoTip="showInfoTip" @click="hide">
      <div style="textAlign: center;">
        复制成功
      </div>
    </info-tip>
  </div>
  <div class="link-details" v-show="showLinkDetails" v-else>
    <header-template-phone>
      <template v-slot:left>
        <div class="back" style="display: flex; alignItems: center;">
          <span class="icon" @click="hidePopup">
            <i class="iconfont iconstbar_fanhui" style="fontSize:22px"></i>
          </span>
          <span style="marginLeft: -4px;">返回</span>
        </div>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text" style="fontSize: 15px">
            链接详情
          </span>
        </div>
      </template>
    </header-template-phone>
    <div class="main">
      <div class="wrapper box-shadow">
        <div class="title-editor-wrapper border-bottom">
          <title-editor 
            @click="deleteLinkCard"
            @update="editedLinkData"
            :value="linkDetails.linkTitle"
            :linkData="linkDetails"
            >
          </title-editor>
        </div>
        <general-info-card :linkDetails="linkDetails"></general-info-card>
        <div class="rate-wrapper border-top">
          <refund-rate-display></refund-rate-display>
        </div>
        <div class="links-wrapper">
          <div class="qrcode-wrapper">
            <img src="../../../assets/imgs/qrcode.png" alt="">
            <p class="save-qrcode">点击保存二维码</p>
          </div>
          <div class="icon-wrapper">
            <div 
              @click="copyLink"
              class="left item"
              ref="link"
              :data-clipboard-text="linkData.link"
              >
              <span class="icon">
                <i class="iconfont icontg_tuiguanglianjie"></i>
              </span>
              <span class="text" >
                推广链接
              </span>
              <input type="hidden">
              <span class="text copy btn">
                点击复制
              </span>
            </div>
            <div 
              class="right item"
              ref="code"
              @click="copyCode"
              :data-clipboard-text="linkData.invitingCode"
              >
              <span class="icon">
                <i class="iconfont icontg_yaoqingma"></i>
              </span>
              <span class="text">
                邀请码
              </span>
              <span class="text copy">
                点击复制
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <info-tip :showInfoTip="showInfoTip" @click="hide">
      <div style="textAlign: center;">
        复制成功
      </div>
    </info-tip>
  </div>
</template>
<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import RefundRateDisplay from '@/components/base/refund-rate-display/refund-rate-display'
import InfoTip from '@/components/base/info-tip/info-tip'
import Clipboard from 'clipboard'
import PopUp from '@/components/base/pop-up/pop-up'
import PopUpListItem from './pop-up-list-item'
import TitleEditor from './title-editor'
import GeneralInfoCard from './general-info-card'

import { mapGetters } from 'vuex'

export default {
  name: 'LinkDetail',
  components: {
    HeaderTemplatePhone,
    HeaderBack,
    RefundRateDisplay,
    InfoTip,
    PopUp,
    PopUpListItem,
    TitleEditor,
    GeneralInfoCard
  },
  props: {
    linkDetails: {
      type: Object,
      default: function() {
        return {}
      }
    },
    showLinkDetails: {
      type: Boolean,
      default: false 
    }
  },
  data() {
    return {
      linkData: 
        {
          id: 1,
          accountType: 'agent',
          title: '自定义名称最多十个字',
          visited: 1208,
          registNo: 82,
          link:'https://www.baidu.com',
          invitingCode: '7787DCEFT30JKL'
        },
        placeholder: '自定义名称最多十个字',
        showInfoTip: false,
        inputValue: '',
        copiedLink: '点击复制',
        copiedCode: '点击复制'
    }
  },
  mounted() {
    this.linkCopy = new Clipboard(this.$refs.link)
    this.codeCopy = new Clipboard(this.$refs.code)
  },
  methods: {
    addLink() {
      this.$router.push({path: '/me/recommend-link/add'})
    },
    copyLink() {
      console.log('click')
      this.copyContent(this.linkCopy)
    },
    copyCode() {
      this.copyContent(this.codeCopy)
    },
    copyContent(btn) {
      btn.on('success', (e) => {
        this.showInfoTip = true 
        e.clearSelection()
      });
      btn.on('error', function(e) {
          console.error('Action:', e.action)
          console.error('Trigger:', e.trigger)
      });
    },
    hide() {
      this.showInfoTip = false 
    },
    hidePopup() {
      this.$emit('click')
    },
    updateLinkTitle() {

    },
    deleteLinkCard() {
      this.$emit('delete', this.linkDetails.id)
    },
    editedLinkData(data) {
      console.log(data)
      this.$emit('update', data)
    }

  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone', 'getUserInfo']),
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px) 
    .link-details 
      position fixed 
      top 0
      left 0
      right 0
      bottom 0 
      background rgba($color-theme-dark, 0.1)
      z-index 1000
      box-sizing border-box 
      .link-content
        position absolute 
        left 50%
        top 50% 
        transform translate(-50%, -50%)
        border-radius 3px
        width 580px 
        height 420px 
        background-color #fff
        box-sizing border-box 
        .left-part 
          width 210px 
        .right-part 
          .links 
            .link 
              padding 20px 0
              text-align left 
              .bold 
                font-weight 700
              .red  
                color $color-theme-red 
              .content 
                margin-top 10px 
            .qrcode-wrapper 
              width 127px 
              margin-top 10px
              img 
                width 100% 
          
  @media screen and (max-width 750px) 
    .link-details
      position fixed
      left 0
      right 0
      top 0
      bottom 0
      z-index 10000
      background:linear-gradient(180deg, #e5e5e5, #fefbfb)
      .main 
        box-sizing border-box 
        padding 0 10px
        padding-top 58px 
        padding-bottom 10px 
        height 100% 
        position relative
        overflow-y scroll 
        .wrapper 
          background #fff
          border-radius 3px 
          display flex
          flex-direction column
          .title-editor-wrapper 
            box-sizing border-box 
            padding 0 10px 
          .links-wrapper  
            text-align center 
            margin-top 20px 
            .qrcode-wrapper 
              display inline-block
              .save-qrcode 
                margin-top 10px
          .icon-wrapper 
            margin-top 28px 
            display flex 
            justify-content center
            padding-bottom 30px 
            .item 
              display flex 
              flex-direction column
              align-items center
              &.left 
                margin-right 60px
              .icon 
                width 45px 
                height 45px 
                border-radius 50% 
                border 1px solid #c0c0c5
                box-sizing border-box 
                text-align center 
                .iconfont 
                  font-size 45px
              .text 
                margin-top 5px
              .copy 
                color #cccdd0

</style>